<template>
	<el-dialog v-model="dialogFormVisible" :title='title' width="50%" align-center append-to-body
			:destroy-on-close='true'>
		<div class="dialog-content">
			<el-form :model="formData" label-width="120px"  style="max-width: 600px;" :rules="rules"  :label-position="labelPosition">
					<el-form-item label="主题" prop='message_title'>
						<el-input v-model="formData.message_title" />
					</el-form-item>
					<el-form-item label="发布部门" prop='message_publish_department' v-if="title=='发布公告' || title=='编辑公告'">
						<el-select v-model="formData.message_publish_department" placeholder="请选择发布部门">
							<el-option v-for="item in options"  :key="item.value" :label="item.value" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="发布人" prop='message_publish_name'>
						<el-input v-model="formData.message_publish_name"  disabled/>
					</el-form-item>
					<el-form-item label="接收部门" prop='message_receipt_object'v-if="title=='发布公告' || title=='编辑公告'">
						<el-select v-model="formData.message_receipt_object" placeholder="请选择接收部门">
							<el-option v-for="item in alloptions"  :key="item.value" :label="item.value" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="公告等级" prop='message_level' v-if="title=='发布公告' || title=='编辑公告'">
						<el-select v-model="formData.message_level" placeholder="选择公告等级">
							<el-option label="一般" value="一般" />
							<el-option label="重要" value="重要" />
							<el-option label="必要" value="必要" />
						</el-select>
					</el-form-item>
					<el-form-item label="内容" prop='message_content'>
						<div style="border: 1px solid #ccc">
							<!-- wangEditor结构 -->
							<Toolbar style="border-bottom: 1px solid #ccc;width: 600px;" :editor="editorRef"
								:defaultConfig="toolbarConfig" :mode="mode" />
							<Editor style="height: 300px; overflow-y: hidden;width: 600px;" v-model="valueHtml"
								:defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
						</div>
					</el-form-item>
			</el-form>
		</div>
		<!-- 底部内容 -->
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" @click="yes" >
			  确定
			</el-button>
		  </span>
		</template>
	  </el-dialog>
</template>

<script lang="ts" setup>
	import {getDepartment} from '@/api/setting.js'
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import { ElMessage } from 'element-plus'
	import '@wangeditor/editor/dist/css/style.css'
	import { bus } from "@/utils/mitt.js"
	import { reactive, ref,onBeforeUnmount,shallowRef } from 'vue'
	import {publishMessage,editMessage} from '@/api/message.js'
	// 标题
    const title=ref()
	const labelPosition = ref('left')

	bus.on('createMessage',(id:number)=>{
		if(id==1){
			title.value="发布公告"
		}
		if(id==2){
			title.value="发布系统消息"
		}
	})
	
	// 不包括全体成员
	const options=ref([])
	// 包括全体成员
	const alloptions=ref([])
	// 部门数据
	const getdepartment=async()=>{
		const res=await getDepartment()
		console.log("---------------原部门数据---------------------");
		console.log(res);
		const data=[]
		const datas=[]
		for(let i=0;i<res.length;i++){
			let obj={
				value:res[i]
			}
			data.push(obj)
			datas.push(obj)
		}
		options.value=data
		datas.push({value:"全体成员"})
		alloptions.value=datas
		console.log('不包括全体成员---------------');
		console.log(options.value);
		console.log('包括全体成员-----------------');
		console.log(alloptions.value);
	}
	getdepartment()
	
	
	bus.on('editMessage',(row:any)=>{
			title.value = '编辑公告'
			// valueHtml.value = ''
			formData.id =row.id
			formData.message_title = row.message_title
			formData.message_publish_department =row.message_publish_department
			formData.message_publish_name = row.message_publish_name
			formData.message_receipt_object = row.message_receipt_object
			formData.message_level = row.message_level
			formData.message_content = row.message_content
	})
	bus.on('editSystemMessage', (row : any) => {
		title.value = "编辑系统消息"
		formData.id = row.id
		formData.message_title = row.message_title
		formData.message_publish_name = row.message_publish_name
		formData.message_content = row.message_content
	})

	interface FormData {
		id : number;
		message_title : string;
		message_publish_department : string;
		message_publish_name : string;
		message_category : string;
		message_receipt_object : string;
		message_level : string;
		message_content : string;
	}

	// 表单数据
	const formData = reactive({
	id: 0,
	message_title: '',
	message_publish_department: '',
	message_publish_name:localStorage.getItem('name'),
	message_category: '',
	message_receipt_object: '',
	message_level: '',
	message_content: '',
    })
	
	const rules = reactive({
		message_title: [
			{ required: true, message: '请输入公告标题', trigger: 'blur' },
		],
		message_publish_department: [
			{ required: true, message: '请选择发布部门', trigger: 'blur' },
		],
		message_publish_name: [
			{ required: true, message: '请输入发布人', trigger: 'blur' },
		],
		message_receipt_object: [
			{ required: true, message: '请选择的接收对象', trigger: 'blur' },
		],
		message_level: [
			{ required: true, message: '请选择公告等级', trigger: 'blur' },
		],
		message_content: [
			{ required: true, message: '请输入公告内容', trigger: 'blur' },
		],
	})
	
	
	// 编辑器实例，必须用 shallowRef
	const editorRef = shallowRef()
	// mode
	const mode = ref('default')
	// 内容 HTML
	const valueHtml = ref()
	const toolbarConfig = {
		excludeKeys: []
	}
	const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {
			// uploadImage: {
			// 	//上传图片配置
			// 	server: 'http://127.0.0.1:3007/set/uploadCompanyPicture', //上传接口地址
			// 	fieldName: 'file', //上传文件名
			// 	methods: 'post',
			// 	metaWithUrl: true, // 参数拼接到 url 上
			// 	// 单个文件上传成功之后
			// 	// onSuccess(file, res) {
			// 	// },
			// 	// 自定义插入图片
			// 	customInsert(res, insertFn) {
			// 		insertFn(res.url)
			// 	},
			// },
		}
	}
	// 上传图片，修改 uploadImage 菜单配置
	// 需要注意的是，如何去修改参数？
	toolbarConfig.excludeKeys = [
		'blockquote',
		'bgColor',
		'color',
		'group-more-style',
		'fontFamily',
		'bulletedList',
		'numberedList',
		'lineHeight',
		'todo',
		'emotion',
		'insertLink',
		'group-video',
		'insertTable',
		'codeBlock',
		'divider',
		'fullScreen',
		'group-image',
	
		// 排除菜单组，写菜单组 key 的值即可
	]
	// 组件销毁时，也及时销毁编辑器
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})
	
	const handleCreated = (editor : any) => {
		editorRef.value = editor // 记录 editor 实例，重要！
	}
	
	const emit=defineEmits(['success'])
	const yes=async()=>{
		if(title.value=='发布公告'){
			formData.message_category='公司公告'
			const res=await publishMessage(formData)
			if(res.status===0){
				ElMessage({
				    message: '发布公告成功',
				    type: 'success',
				  })
				  emit('success')
				  dialogFormVisible.value=false
			}else{
				ElMessage.error('发布公告失败')
			}
		}
		if(title.value=='编辑公告'){
			const res=await editMessage(formData)
			if(res.status===0){
				ElMessage({
				    message: '编辑公告成功',
				    type: 'success',
				  })
				  emit('success')
				  dialogFormVisible.value=false
			}else{
				ElMessage.error('编辑公告失败')
			}
		}
		if(title.value=='发布系统消息'){
			formData.message_category='系统消息'
			const res=await publishMessage(formData)
			if(res.status===0){
				ElMessage({
				    message: '发布系统消息成功',
				    type: 'success',
				  })
				  emit('success')
				  dialogFormVisible.value=false
			}else{
				ElMessage.error('发布系统消息失败')
			}
		}
		if(title.value=='编辑系统消息'){
			const res=await editMessage(formData)
			if(res.status===0){
				ElMessage({
				    message: '编辑系统消息成功',
				    type: 'success',
				  })
				  emit('success')
				  dialogFormVisible.value=false
			}else{
				ElMessage.error('编辑系统消息失败')
			}
		}
		
	}
	
	// 弹窗开关  编辑管理员
    const dialogFormVisible = ref(false)
	const open=()=>{
		dialogFormVisible.value=true
	}
	defineExpose({
		open
	})
	
	onBeforeUnmount(()=>{
		bus.all.clear()
	})
</script>

<style lang="scss" scoped>
	.dialog-footer{
		display:flex;
		justify-content: flex-end;
	}
	.el-form-item{
		margin:16px;
	}
</style>